<template>
    <div id="wechat-list-member">
        <div v-if="data.domIshow">
            <top-nav :title="data.pageBasicData.title">
                <template v-slot:right class="vist-sti">
                    <span class="vist-sti-icon iconfont icon-liulan"></span>
                    <span class="vist-sti-count">{{data.pageBasicData.visitCount}}</span>
                </template>
            </top-nav>
            <top-explain
            @updataList="updataList"
            :pageBasicData="data.pageBasicData"
            :updataTimeText="data.pageBasicData.updataTimeText"
            >
            </top-explain>
            <select-option 
            :optList="data.optList"
            :actOpt="data.actOpt"
            :defaultOpt="data.defaultOpt"
            @clickSelect="clickSelect"
            ></select-option>
            <!-- <div class="updata-time">
                本次列表更新时间{{data.pageBasicData.updataTimeText}}
            </div> -->
            <list
            ref="list"
            :optList="data.optList"
            :actOpt="data.actOpt"
            :height="data.listHeight"
            :query="data.queryStr"
            :defaultOpt="data.defaultOpt"
            @setPageBasicData="setPageBasicData"
            @addList="addList"
            @clearActList="clearActList"
            @cachePageData="cachePageData"
            @pageBasicDataSeted="pageBasicDataSeted"
            @hideDom="hideDom"
            ></list>
            <btn-menu
            ref="btnMenu"
            :overlayShow="data.overlayShow"
            :wechatGroupNo="data.pageBasicData.assNo"
            :isOuter="data.pageBasicData.assType"
            :wechatGroupName="data.pageBasicData.groupName"
            @hideOverlay="hideOverlay"
            @showOverlay="showOverlay"
            @cachePageData="cachePageData"
            ></btn-menu>
            <van-overlay :show="data.overlayShow" @click="hideOverlay" duration="0" />
        </div>
        <div v-else class="no-ser">
            尚未开通服务
        </div>
    </div>
</template>

<script>
// 自定义组件
import TopNav from '_components/project/common/TopNav'
import TopExplain from '_components/project/MembelListWechat/TopExplain'
import SelectOption from '_components/project/MembelListWechat/SelectOption'
import List from '_components/project/MembelListWechat/List'
import BtnMenu from '_components/project/MembelListWechat/BtnMenu'

// 自定义方法
import { checkDataEqualVal } from "_commonFn/check"
import { returnDateAll } from "_commonFn/time"
import { getQueryStrParams } from "_commonFn/url"
import { checkArrIndexObj } from "_commonFn/array"
import { setUserShareLoginUrlInfo } from "_projectFn/user"
import { checkCacheaIsPageData } from "_projectFn/check"
import { returnTime } from "_commonFn/time"

// Vue全家桶
import Vue from 'vue'

// UI组件
import { Overlay, Icon } from 'vant'

// 字体
import '_assets/fonts/iconfont.css'

Vue.use(Overlay).use(Icon)

export default {
    name: 'MembelListWechat',
    data() {
        return {
            data: {
                optList: [
                    {
                        name: '群员',
                        id: 'member',
                        list: [],
                    },
                    {
                        name: '需求',
                        id: 'demand',
                        list: [],
                    },
                    {
                        name: '互助',
                        id: 'help',
                        list: [],
                    },
                ],
                actOpt: 'member',
                defaultOpt: 'member',
                pageBasicData: { // 页面基本信息
                    updataTimeText: '', // 更新时间
                    isSetBus: '', // 当前登录用户是否设置业务名片
                    isBindWechat: '', // 当前登录用户是否绑定微信公众号
                    title: '', // 导航栏标题
                    groupName: '', // 微信群名称
                    userCount: 0, // 微信群成员数量
                    businessCount: 0, // 设置名片数量
                    updateMaxCount: 0, // 每天最多更新次数
                    demandCount: 0,
                    partnerCount: 0,
                    isSeted: 0,
                    wechatGroupNo: 0,
                    assNo: '',
                    assType: 0, // 当前微信群类型(0:直属,1:外联,-1:未知),如无关联则返回-1
                    isBeForeUpdataMyInfo: '',
                    visitCount: '', // 浏览次数
                },
                listHeight: 0,
                overlayShow: false,
                queryStr: {},
                domIshow: true,
            }
        }
    },
    methods: {
        hideDom() {
            this.data.domIshow = false
        },
        // 点击选项
        clickSelect(id) {
            if (id) {
                this.data.actOpt = id
            }
        },
        // 设置列表高度
        setListHeight() {
            this.data.listHeight = (window.innerHeight || document.documentElement.clientHeight) - 40 - 60 - 40 - 55
        },
        // 隐藏遮罩层
        hideOverlay() {
            this.data.overlayShow = false
        },
        // 显示遮罩层
        showOverlay() {
            this.data.overlayShow = true
        },
        // 设置页面基本数据
        setPageBasicData(data) {
            // console.log('设置页面基本数据', data)
            this.data.pageBasicData.groupName = data.groupName
            this.data.pageBasicData.title = `${data.groupName}微信群`
            this.data.pageBasicData.userCount = data.userCount
            this.data.pageBasicData.businessCount = data.businessCount
            this.data.pageBasicData.updataTimeText = returnDateAll({timestamp: data.updataTime})
            this.data.pageBasicData.updateMaxCount = data.updateMaxCount
            this.data.pageBasicData.isBindWechat = data.isBindWechat
            this.data.pageBasicData.demandCount = data.demandCount
            this.data.pageBasicData.partnerCount = data.partnerCount
            this.data.pageBasicData.isSetBus = data.isSetBus
            this.data.pageBasicData.assNo = data.assNo
            this.data.pageBasicData.assType = data.assType 
            this.data.pageBasicData.isBeForeUpdataMyInfo = data.isBeForeUpdataMyInfo
            this.data.pageBasicData.visitCount = data.visitCount
            
            this.data.optList = this.data.optList.map(item => {
                if (item.id === 'member') {
                    item.name = `群员<span class="statistics-opt">(${data.userCount}人/${data.businessCount})</span>`
                } else if (item.id === 'demand') {
                    item.name = `需求<span class="statistics-opt">(${data.demandCount}人)</span>`
                } else if (item.id === 'help') {
                    item.name = `互助<span class="statistics-opt">(${data.partnerCount}人)</span>`
                }
                return item
            })
        },
        pageBasicDataSeted() {
            if (this.data.pageBasicData.isSeted === 0) {
                this.data.pageBasicData.isSeted = 1
            }
        },
        // 设置群成员列表数据
        addList(data) {
            // console.log('设置群成员列表数据 data', data)
            const list = checkArrIndexObj({
                arr: this.data.optList,
                key: 'id',
                val: data.id
            }).list
            // console.log('list', list)
            data.list.map(item => {
                list.push({
                    userId: item.UserId, //	string	用户编号
                    nickName: item.NickName, // string	微信昵称
                    roomNickName: item.RoomNickName, // string	群成员昵称
                    sex: item.Sex == 2 ? 0 : item.Sex == 0 ? 3 : item.Sex, // int	性别(1:男，2：女，-1：未知)
                    headImg: item.HeadImg, // string	用户头像
                    signature: item.Signature, // string	用户网站签名
                    area: item.Area, // string	地区
                    company: item.Company, // string	企业
                    yourSelf: item.YourSelf, // string	介绍
                    supply: item.Supply, //	string 供应
                    demand: item.Demand, //	string	需求
                    isBusiness: item.IsBusiness, //	int	是否填写了业务名片(1:是,0:否)
                    isPartner: item.IsPartner, // int	是否设置了找合作伙伴(1:是,0:否)
                    isRestricted: item.IsRestricted, // int 是否受限(1:是,0:否)
                    isBindWx: item.IsBindWx, // int 是否绑定微信(1:是,0:否)
                    isFriend: item.IsFriend, // int	是否是微信客服好友(1:是,0:否)
                    updateTime: item.UpdateTime, //	long	业务名片更新时间戳
                    sort: item.Sort, // int	信息排序编号
                    fine: item.Fine, // int	信息排序编号
                    findWho: item.FindWho || '',
                    viewCount: item.ViewCount || 0,
                    updateTimeText: returnTime({timestamp: item.UpdateTime, showTimeDetail: false}),
                    myHelp: item.MyHelp || '',
                    groupWechat: item.GroupWechat || item.OwerAssWechat,
                    seminar: item.Seminar,
                    seminarWorking: item.SeminarTime,
                })
            })
        },
        // 更新列表
        updataList() {
            this.$refs.list.updataList()
        },
        // 清除选择的列表数据
        clearActList() {
            let list = checkArrIndexObj({
                arr: this.data.optList,
                key: 'id',
                val: this.data.actOpt
            }).list
            list = list.splice(0, list.length)
        },
        // 缓存页面数据
        cachePageData() {
            const listMescrollFig = this.$refs.list.getAllMesConfig()
            sessionStorage.setItem('MemberListWechatCache', JSON.stringify({
                optList: this.data.optList,
                actOpt: this.data.actOpt,
                defaultOpt: this.data.defaultOpt,
                pageBasicData: this.data.pageBasicData,
                listHeight: this.data.listHeight,
                overlayShow: this.data.overlayShow,
                queryStr: this.data.queryStr,
                listMescrollFig,
                scrollTop: document.getElementById(this.data.actOpt).scrollTop,
            }))
        },
        // 设置页面数据
        setPageCacheData(data) {
            this.data.optList = data.optList
            this.data.listHeight = data.listHeight
            this.data.actOpt = data.actOpt
            this.data.defaultOpt = data.defaultOpt
            this.data.pageBasicData = data.pageBasicData
            this.data.overlayShow = data.overlayShow
            // console.log('data.scrollTop', data.scrollTop)
            // console.log('data.actOpt', data.actOpt)
            this.$refs.list.setAllMesConfig(data.listMescrollFig)
            Vue.nextTick()
            .then(function () {
                document.getElementById(data.actOpt).scrollTop = data.scrollTop
            })
        }
    },
    mounted() {
        const that = this
        that.data.queryStr = getQueryStrParams({
            params: ["wecGroId", "serWecId", "shareUser"],
            query: this.$route.query
        })
        if (that.data.queryStr.shareUser) {
            setUserShareLoginUrlInfo({
                urlType: 'wechatUserItem',
                userId: that.data.queryStr.shareUser
            })
        }
        checkCacheaIsPageData({
            sessionStorageKey: 'MemberListWechatCache',
            pageQueryStr: that.data.queryStr,
            callback(data) {
                if (data) {
                    that.setPageCacheData(data)
                    sessionStorage.removeItem('MemberListWechatCache')
                } else {
                    that.setListHeight()
                }
            }
        })
        // console.log('mounted')
        // console.log("this.queryStr", this.queryStr)
    },
    activated() {
        const that = this
        if (that.$store.getters.isWechatBro) {
			checkDataEqualVal({
				data: that.$store.getters,
				key: 'getWechatStatus',
				val: ['success', 'fail'],
				callback(val) {
					if (val === 'success') {
                        checkDataEqualVal({
                            data: that.data.pageBasicData,
                            key: 'isSeted',
                            val: 1,
                            callback() {
                                that.$refs.btnMenu.share('normal', that.data.pageBasicData.groupName)
                            }
                        })
                    }
				}
			})
        }
        if (this.data.actOpt) {
            console.log('this.data.actOpt', this.data.actOpt)
            document.getElementById(this.data.actOpt).scrollTop = this.$route.meta.listScrollTop
        }
    },
    components: {
        TopExplain,
        SelectOption,
        List,
        BtnMenu,
        TopNav,
    },
	beforeRouteLeave (to, from, next) {
        // console.log('this.actOpt', this.data.actOpt)
        // console.log('scrollTop', document.getElementById(this.data.actOpt).scrollTop)
		from.meta.listScrollTop = document.getElementById(this.data.actOpt).scrollTop
		next()
	},
}
</script>

<style lang="scss" scoped>
#wechat-list-member {
    .updata-time {
        height: 30px;
        width: 100%;
        padding: 0 15px;
        background: #f6f6f6;
        color: #999999;
        line-height: 30px;
        font-size: 12px;
    }
}

.no-ser {
    text-align: center;
    margin-top: 20px;
}

.vist-sti-icon {
    margin-right: 2px;
}

.vist-sti-count {
    font-size: 12px;
}
</style>